<template>
  <div class="com-temp">
    <Header title="中国各地区气温可视化" />
    <div class="loc-info">
      <div class="loc-left">
        <div class="loc-box">
          <div class="content">{{ position || '???' }}</div>
          <div class="title">当前位置</div>
        </div>
        <div class="loc-box">
          <div class="content">{{ currentTime || '???' }}</div>
          <div class="title">当前时间</div>
        </div>
        <div class="loc-box">
          <div class="content">{{ timeZone || '???' }}</div>
          <div class="title">当地时区</div>
        </div>
      </div>
      <div class="loc-right">
        <div class="loc-box">
          <div class="content">{{ weather.temp || '???' }}°</div>
          <div class="title">温度</div>
        </div>
        <div class="loc-box">
          <div class="content">{{ weather.humidity || '???' }}%</div>
          <div class="title">相对湿度</div>
        </div>
        <div class="loc-box">
          <div class="content">{{ weather.precip || '???' }}mm</div>
          <div class="title">降水量</div>
        </div>
        <div class="loc-box">
          <div class="content">{{ weather.pressure || '???' }}hPa</div>
          <div class="title">大气压强</div>
        </div>
        <div class="loc-box">
          <i :class="`qi-${weaIcon}`" style="font-size: 2vw" />
        </div>
      </div>
    </div>
    <div class="body-content">
      <el-row style="width: 100%" :gutter="10">
        <el-col :span="5" :xs="24" :sm="12" :md="12" :lg="5">
          <div class="left-content">
            <div ref="chart-1-1" class="chart-1-1 box-surface">
              <TemperatureBar
                :key="adjustArr[0].flag"
                :width="adjustArr[0].width"
                :height="adjustArr[0].height"
              />
            </div>
            <div class="chart-1-2 box-surface">
              <ChangeLine
                :key="adjustArr[1].flag"
                :width="adjustArr[1].width"
                :height="adjustArr[1].height"
              />
            </div>
            <div class="chart-1-3 box-surface">
              <Radar
                :key="adjustArr[2].flag"
                :width="adjustArr[2].width"
                :height="adjustArr[2].height"
              />
            </div>
          </div>
        </el-col>
        <el-col
          class="hidden-md-and-down"
          :span="14"
          :xs="24"
          :sm="24"
          :md="12"
          :lg="14"
        >
          <div class="center-content">
            <AllMap />
          </div>
        </el-col>
        <el-col :span="5" :xs="24" :sm="12" :md="12" :lg="5"
          ><div class="right-content">
            <div class="chart-2-1 box-surface">
              <el-row>
                <el-col
                  v-for="(item, index) in pieData"
                  :key="index"
                  :span="12"
                  type="flex"
                  class="pie-container"
                >
                  <Pie
                    :key="adjustArr[3].flag"
                    :value="item.value"
                    :title="item.title"
                    :width="parseInt(adjustArr[3].width) / 2 + 'px'"
                    :height="parseInt(adjustArr[3].height) / 2 + 'px'"
                    :className="`pie-${index + 1}`"
                  />
                </el-col>
              </el-row>
            </div>
            <div class="chart-2-2 box-surface">
              <vueSeamlessScroll
                :class-option="classOption"
                :data="listData"
                class="seamlessRolling"
              >
                <el-row
                  v-for="(item, index) in listData"
                  :key="index"
                  class="list-row"
                >
                  <el-col :span="24">
                    <p class="seam-content">
                      <a :href="item.herf" target="_blank">{{ item.title }}</a>
                    </p>
                  </el-col>
                </el-row>
              </vueSeamlessScroll>
            </div>
          </div></el-col
        >
      </el-row>
    </div>
  </div>
</template>

<script>
import 'qweather-icons/font/qweather-icons.css'

import dayjs from 'dayjs'
import vueSeamlessScroll from 'vue-seamless-scroll'

// 请求api
import { getCityInfo, getRTimeWea } from '@/api/getLocationInfo'
import { Chart } from '@/config/chart'
import { adjust } from '@/utils/adjust'

export default {
  name: 'Temperature',
  components: {
    Header: () => import('@/components/header'),
    AllMap: () => import('@/components/charts/AllMap'),
    TemperatureBar: () => import('./charts/TemperatureBar'),
    ChangeLine: () => import('./charts/ChangeLine'),
    Radar: () => import('./charts/Radar'),
    Pie: () => import('./charts/Pie'),
    vueSeamlessScroll
  },
  data() {
    return {
      // 图表自适应字段
      adjustArr: [
        new Chart('0px', '0px', 0, null, null),
        new Chart('0px', '0px', 0, null, null),
        new Chart('0px', '0px', 0, null, null),
        new Chart('0px', '0px', 0, null, null),
        new Chart('0px', '0px', 0, null, null)
      ],
      // 饼图数据
      pieData: [
        {
          value: 80,
          title: '城市温度超30℃占比'
        },
        {
          value: 60,
          title: '全国相对湿度超60℃占比'
        },
        {
          value: 50,
          title: '全国大气压强超1004hPa占比'
        },
        {
          value: 70,
          title: '全国体感温度超24℃占比'
        }
      ],
      // 列表数据
      listData: [
        {
          title:
            '《生态环境统计管理办法》已于2022年12月30日由生态环境部2022年第六次部务会议审议通过',
          herf: 'https://www.gov.cn/gongbao/content/2023/content_5754536.htm',
          timeStamp: '2023年1月18日'
        },
        {
          title:
            '团结合作勇担责任 构建亚太命运共同体——在亚太经合组织第二十九次领导人非正式会议上的讲话',
          herf: 'https://www.gov.cn/gongbao/content/2022/content_5729414.htm',
          timeStamp: '2022年11月18日'
        },
        {
          title:
            '珍爱湿地 守护未来 推进湿地保护全球行动——在《湿地公约》第十四届缔约方大会开幕式上的致辞',
          herf: 'https://www.gov.cn/gongbao/content/2022/content_5727888.htm',
          timeStamp: '2022年11月5日'
        },
        {
          title: '在第十七届东亚峰会上的讲话 中华人民共和国国务院总理李克强',
          herf: 'https://www.gov.cn/gongbao/content/2022/content_5729417.htm',
          timeStamp: '2022年11月13日'
        },
        {
          title:
            '共迎时代挑战 共建美好未来——在二十国集团领导人第十七次峰会第一阶段会议上的讲话',
          herf: 'https://www.gov.cn/gongbao/content/2022/content_5729412.htm',
          timeStamp: '2022年11月15日'
        },
        {
          title:
            '高举中国特色社会主义伟大旗帜为全面建设社会主义现代化国家而团结奋斗——在中国共产党第二十次全国代表大会上的报告',
          herf: 'https://www.gov.cn/gongbao/content/2022/content_5722378.htm',
          timeStamp: '2022年10月16日'
        },
        {
          title:
            '构建高质量伙伴关系 开启金砖合作新征程——在金砖国家领导人第十四次会晤上的讲话',
          herf: 'https://www.gov.cn/gongbao/content/2022/content_5699921.htm',
          timeStamp: '2022年6月23日'
        },
        {
          title:
            '关于印发《减污降碳协同增效实施方案》的通知生态环境部 发展改革委 工业和信息化部 住房城乡建设部交通运输部 农业农村部 能源局',
          herf: 'https://www.gov.cn/gongbao/content/2022/content_5707285.htm',
          timeStamp: '2022年6月10日'
        },
        {
          title: '国务院关于印发气象高质量发展纲要(2022—2035年)的通知',
          herf: 'https://www.gov.cn/gongbao/content/2022/content_5695038.htm',
          timeStamp: '2022年4月28日'
        },
        {
          title:
            '坚定信心 勇毅前行 共创后疫情时代美好世界——在2022年世界经济论坛视频会议的演讲',
          herf: 'https://www.gov.cn/gongbao/content/2022/content_5672662.htm',
          timeStamp: '2022年1月17日'
        },
        {
          title:
            '同舟共济，继往开来，携手构建新时代中非命运共同体——在中非合作论坛第八届部长级会议开幕式上的主旨演讲',
          herf: 'https://www.gov.cn/gongbao/content/2021/content_5661972.htm',
          timeStamp: '2021年11月29日'
        },
        {
          title:
            '坚持可持续发展共建亚太命运共同体——在亚太经合组织工商领导人峰会上的主旨演讲',
          herf: 'https://www.gov.cn/gongbao/content/2021/content_5654768.htm',
          timeStamp: '2021年11月11日'
        },
        {
          title:
            '共同开创亚太经济合作新篇章——在亚太经合组织第二十八次领导人非正式会议上的讲话',
          herf: 'https://www.gov.cn/gongbao/content/2021/content_5654769.htm',
          timeStamp: '2021年11月12日'
        }
      ],
      // 位置
      position: '',
      // 时区
      timeZone: '',
      // 天气icon
      weaIcon: '',
      // 天气
      weather: {
        temp: '',
        humidity: '',
        precip: '',
        pressure: ''
      },
      // 定时器
      timer: null,
      // 当前时间
      currentTime: ''
      // loading: false
    }
  },
  computed: {
    // 控制自动下拉列表刷新配置
    classOption() {
      return {
        step: 1, // 数值越大速度滚动越快
        limitMoveNum: this.listData.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 500 // 单步运动停止的时间(默认值1000ms)
      }
    }
  },
  mounted() {
    const that = this
    this.timer = setInterval(() => {
      that.currentTime = dayjs(new Date()).format('YYYY/MM/DD HH:mm')
    }, 1000)

    const bar = document.querySelector('.chart-1-1')
    const line = document.querySelector('.chart-1-2')
    const pie = document.querySelector('.chart-2-1')
    const radar = document.querySelector('.chart-1-3')
    this.adjustArr[0].dom = bar
    this.adjustArr[1].dom = line
    this.adjustArr[2].dom = radar
    this.adjustArr[3].dom = pie

    adjust(this.adjustArr[0])
    adjust(this.adjustArr[1])
    adjust(this.adjustArr[2])
    adjust(this.adjustArr[3])

    this.getLocInfo()
  },

  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
    }

    for (const obj of this.adjustArr) {
      if (obj.dom && obj.observer) {
        obj.observer.unobserve(obj.dom)
      }
    }
  },
  methods: {
    getLocInfo() {
      const that = this
      const geolocation = new BMap.Geolocation()
      geolocation.getCurrentPosition(async function (r) {
        if (this.getStatus() === BMAP_STATUS_SUCCESS) {
          const pos = r.point.lng + ',' + r.point.lat
          const res = await that.$axios.all([
            getRTimeWea(pos),
            getCityInfo(pos)
          ])
          if (res && res[0].code === '200' && res[1].code === '200') {
            const { now } = res[0]
            const { location } = res[1]
            // 处理天气信息
            that.weather.temp = now.temp
            that.weather.humidity = now.humidity
            that.weather.precip = now.precip
            that.weather.pressure = now.pressure
            // 处理天气图标
            that.weaIcon = now.icon
            // 处理地理位置信息
            const category = location[0].adm1.at(-1)
            if (category === '省') {
              that.position = location[0].adm1.slice(0, -1) + location[0].adm2
            } else if (category === '区') {
              that.position = location[0].adm1.slice(0, 2) + location[0].adm2
            } else if (category === '市') {
              that.position = location[0].adm1.slice(0, -1) + location[0].name
            } else {
              that.position = location[0].country
            }

            // 处理时区
            that.timeZone = location[0].tz + location[0].utcOffset
          } else {
            alert('获取天气/城市信息失败')
          }
        } else {
          alert('获取地理位置信息失败')
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/ellipsis.scss';

.com-temp {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: url('https://demo-oss-video.oss-cn-fuzhou.aliyuncs.com/image/bg.jpg?x-oss-process=style/process')
    no-repeat center;
  background-size: cover;
  // 控制顶部文字的显示
  @media screen and (max-height: 450px), (max-width: 1200px) {
    .loc-info {
      display: none;
    }
  }

  .loc-info {
    position: absolute;
    top: 1.5vw;
    width: 100%;
    height: 2.5vw;

    .loc-left,
    .loc-right {
      display: flex;
      justify-content: space-around;
      width: 25%;
      height: 100%;
      color: #0efcff;
      text-align: center;

      .loc-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        padding-bottom: 5px;

        .title {
          display: flex;
          align-items: center;
          height: 30%;
          font-size: 1vw;
        }

        .content {
          display: flex;
          align-items: center;
          height: 70%;
          font-size: 1vw;
        }
      }
    }

    .loc-left {
      float: left;
      margin-left: 5%;
    }

    .loc-right {
      float: right;
      margin-right: 5%;
    }
  }

  .body-content {
    display: flex;
    height: 90vh;

    .el-row {
      .el-col {
        height: 100%;

        .left-content,
        .right-content {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          height: 100%;

          div[class^='chart'] {
            width: 100%;
            border-radius: 5px;
          }

          .chart-1-1,
          .chart-1-2,
          .chart-1-3,
          .chart-2-1 {
            height: 32%;
          }

          .chart-2-2 {
            height: 64%;

            .seamlessRolling {
              position: relative;
              z-index: 999;
              height: 100%;
              overflow: hidden;
              text-align: center;

              .seam-content {
                padding: 10px;
                font-size: 12px;

                @include ell;

                color: #fff;

                a {
                  color: #fff;
                  text-decoration: none;
                }
              }
            }
          }
        }

        .box-surface {
          position: relative;
          box-sizing: border-box;
          width: 100%;
          height: 100%;
          margin: auto;
          border: 2px solid #02a6b5;

          &::before {
            position: absolute;
            top: -2px;
            bottom: -2px;
            left: 6%;
            width: 88%;
            content: '';
            border-top: 2px solid #0b3146;
            border-bottom: 2px solid #0b3146;
          }

          &::after {
            position: absolute;
            top: 12%;
            right: -2px;
            left: -2px;
            height: 76%;
            content: '';
            border-right: 2px solid #0b3146;
            border-left: 2px solid #0b3146;
          }
        }

        .center-content {
          height: 100%;
        }

        .pie-container {
          flex-wrap: wrap;
        }
      }
    }
  }

  .footer-content {
    width: 100%;
  }
}
</style>
